<!--
 * @Author: 噜噜噜 1163376226@qq.com
 * @Date: 2025-03-27 15:42:57
 * @LastEditors: 噜噜噜 1163376226@qq.com
 * @LastEditTime: 2025-04-23 13:56:50
 * @FilePath: /auto/automation-project/add-element.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增元素</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <h3>模块元素</h3>
            <ul id="elementList">
                <!-- 默认提示 -->
                <li class="no-data" id="selectModuleTip">请先选择一个模块</li>
                <!-- 无数据提示 -->
                <li class="no-data" id="noElementsTip" style="display:none">当前模块暂无元素数据</li>
                <!-- 元素模板 - 隐藏的模板用于动态克隆 -->
                <li class="element-item" id="elementItemTemplate" style="display:none">
                    <div class="element-header">
                        <span class="module-name"></span>
                        <span class="element-content"></span>
                    </div>
                    <div class="element-details">
                        <div class="detail-row">
                            <span class="detail-label">操作项:</span>
                            <span class="detail-value action-content-value"> 未知</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">操作类型: </span>
                            <span class="detail-value action-type-value"> 未知</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">选择器: </span>
                            <span class="detail-value selector-value"> 未知</span>
                        </div>
                        <div class="detail-row text-value" style="display:none">
                            <span class="detail-label">文本值: </span>
                            <span class="detail-value text-content"></span>
                        </div>
                    </div>
                    <div class="element-actions">
                        <button class="edit-button">编辑</button>
                        <button class="delete-button">删除</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="main-content">
            <h1>新增元素</h1>
            <form id="addElementForm">
                <div class="form-row">
                    <label for="module" class="form-label">选择模块</label>
                    <select id="module" name="module" class="form-select" required>
                        <option value="">-- 请选择模块 --</option>
                    </select>
                </div>
                <div class="form-row">
                    <label for="elementContent" class="form-label">操作项</label>
                    <input type="text" id="elementContent" name="elementContent" class="form-control" required>
                </div>
                <div class="form-row">
                    <label for="actionType" class="form-label">操作类型</label>
                    <select id="actionType" name="actionType" class="form-select" required>
                        <option value="">-- 请选择操作类型 --</option>
                    </select>
                </div>
                <div class="form-row">
                    <label for="elementSelector" class="form-label">元素选择器</label>
                    <select id="elementSelector" name="elementSelector" class="form-select" required>
                        <option value="">-- 请选择元素选择器 --</option>
                    </select>
                </div>
                <div class="form-row">
                    <label for="textValue" class="form-label">文本值</label>
                    <input type="text" id="textValue" name="textValue" class="form-control">
                </div>
                <div class="form-row">
                    <label for="description" class="form-label">描述文本</label>
                    <textarea id="description" name="description" class="form-control" rows="3"></textarea>
                </div>
                <button type="submit" class="btn btn-block">提交</button>
            </form>

        </div>
        <script src="../js/app.js" type="module"></script>
        <script src="../js/apiConfig.js" type="module"></script>
        <script src="../js/element.js" type="module"></script>
</body>

</html>